@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$typography: map.get(gio.$mat-theme, typography);

.stepper-menu-step {
  border: 2px solid mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10');
  border-radius: 4px;

  &__header {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    height: 44px;

    &.clickable {
      cursor: pointer;
    }

    &__info {
      flex: 1 1 auto;
      padding-left: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;

      &__number {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 23px;
        height: 23px;

        border: 2px solid;
        border-radius: 20px;

        &-started {
          background: mat.get-color-from-palette(gio.$mat-accent-palette, 'darker20');
          color: mat.get-color-from-palette(gio.$mat-dove-palette, 'default');

          border: 2px solid mat.get-color-from-palette(gio.$mat-accent-palette, 'darker20');
        }

        &-not-started {
          background: mat.get-color-from-palette(gio.$mat-dove-palette, 'default');
          color: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter60');

          border-color: mat.get-color-from-palette(gio.$mat-dove-palette, 'default');
        }

        &-invalid {
          background: mat.get-color-from-palette(gio.$mat-dove-palette, 'default');
          color: mat.get-color-from-palette(gio.$mat-warning-palette, 'lighter60');

          border-color: mat.get-color-from-palette(gio.$mat-dove-palette, 'default');
        }
      }

      &__title {
        @include mat.typography-level($typography, subtitle-2);

        &-not-started {
          color: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter60');
        }

        &-invalid {
          color: mat.get-color-from-palette(gio.$mat-warning-palette, 'lighter60');
        }
      }
    }

    &__icon {
      padding: 0 16px;
      display: flex;
      flex-direction: row;
      align-items: center;

      &:has(&-done) {
        border-left: 2px solid mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10');
      }

      &-done {
        color: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter40');

        &.preview-open {
          transform: rotate(180deg);
          transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        &.preview-close {
          transform: rotate(0deg);
          transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
        }
      }

      &-current {
        color: mat.get-color-from-palette(gio.$mat-accent-palette, 'darker20');
      }
    }
  }

  &__content {
    overflow: hidden;

    &.preview-open {
      max-height: 500px;
      transition: max-height 225ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    &.preview-close {
      max-height: 0;
      transition: max-height 225ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    &__wrapper {
      border-top: 2px solid mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10');
      padding: 16px;
    }

    // Make sure wrapper is not displayed if menu item is empty
    ::ng-deep &__wrapper:has(> *:empty) {
      display: none;
    }
  }
}
